/**选股器的筛选条件 */
<template>
  <div class="page-box h100 display-flex czbj">
    <n-tabs type="line" animated>
      <n-tab-pane name="1" tab="行情指标">
        <n-checkbox-group
          v-model:value="cities"
          class="mt20"
          @update:value="checkboxFun"
        >
          <n-space item-style="display: flex;">
            <n-checkbox
              :value="item.key"
              :label="item.name"
              v-for="(item, idx) in listData"
              :key="idx"
            />
          </n-space>
        </n-checkbox-group>
      </n-tab-pane>
      <n-tab-pane name="2" tab="基本指标">
        <n-checkbox-group
          v-model:value="cities"
          class="mt20"
          @update:value="checkboxFun"
        >
          <n-space item-style="display: flex;">
            <n-checkbox
              :value="item.key"
              :label="item.name"
              v-for="(item, idx) in listDataer"
              :key="idx"
            />
          </n-space>
        </n-checkbox-group>
      </n-tab-pane>

      <n-tab-pane name="3" tab="独行指标">
        <n-checkbox-group
          v-model:value="cities"
          class="mt20"
          @update:value="checkboxFun"
        >
          <n-space item-style="display: flex;">
            <n-checkbox
              :value="item.key"
              :label="item.name"
              v-for="(item, idx) in listDatasan"
              :key="idx"
            />
          </n-space>
        </n-checkbox-group>
      </n-tab-pane>
      <n-tab-pane name="4" tab="快捷操作">
        <n-button type="primary" @click="shortLine">短线助手</n-button>
        <n-button type="primary" @click="chuInit" class="ml20"
          >还原初始</n-button
        >
      </n-tab-pane>
    </n-tabs>

    <div>
      <div class="data-context" id="data-context">
        <div class="table mt20 cen dfgdgdftt" v-if="cities.length > 0">
          <div class="trow">
            <div class="cell">条件</div>
            <div class="cell">最小值</div>
            <div class="cell">最大值</div>
            <div class="cell">日期设置</div>
            <div class="cell">操作</div>
          </div>

          <div class="trow" v-for="(item, idx) in formList" :key="idx">
            <div class="cell">
              {{ item.name }}
            </div>
            <div class="cell">
              <n-input
                type="text"
                v-model:value="item.minVal"
                :placeholder="'请输入' + item.name"
              />
            </div>
            <div class="cell">
              <n-input
                type="text"
                v-model:value="item.maxVal"
                :placeholder="'请输入' + item.name"
              />
            </div>
            <div class="cell">
              <div class="display-flex" v-if="item.year">
                <n-select
                  v-model:value="item.year"
                  :options="particularYear"
                  class="cferrtt"
                />
                <n-select
                  v-model:value="item.btype"
                  :options="baotype"
                  class="cferrtt"
                />
              </div>
              <!-- <n-select v-model:value="value" :options="options" /> -->
            </div>
            <div class="cell">
              <n-button
                type="error"
                size="medium"
                quaternary
                @click="delList(idx, item.key)"
                >删除</n-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
 <script lang='ts' setup>
import { h, ref } from "vue";
import { listData, listDataer, listDatasan } from "../../util/xgData";
import { initXx } from "../../util/xgData";
let tabsValue = ref("1");
const formList = ref([]);
const tabupdate = (num) => {
  tabsValue.value = num;
};
const cities = ref([]);
const particularYear = [,];
for (let i = 2022; i > 2008; i--) {
  particularYear.push({
    label: i,
    value: i,
  });
}
const baotype = [
  {
    label: "一季报",
    value: "0331",
  },
  {
    label: "二季报",
    value: "0630",
  },
  {
    label: "三季报",
    value: "0930",
  },
  {
    label: "年报",
    value: "1231",
  },
];
if (localStorage.formList) {
  formList.value = JSON.parse(localStorage.formList);
  formList.value.map((a) => {
    cities.value.push(a.key);
  });
}
const checkboxFun = (e) => {
  formList.value = [];
  const dataJh = [...listData, ...listDataer, ...listDatasan];
  e.map((key) => {
    const data = dataJh.filter((a) => a.key == key)[0];
    formList.value.push(data);
  });
  var container = document.querySelector("#data-context");
  container.scrollTop = 800;
};
const chuInit = () => {
  let datse = [];
  initXx.map((a) => {
    datse.push(a.key);
  });
  checkboxFun(datse);
};
const shortLine = () => {
  const dx = ["pct", "tr", "fmc"];
  formList.value = [];
  const dataJh = [...listData, ...listDataer, ...listDatasan];
  dx.map((key) => {
    const data: any = dataJh.filter((a) => a.key == key)[0];
    if (data.key == "pct") {
      data.minVal = "3";
      data.maxVal = "5";
    }
    if (data.key == "tr") {
      data.minVal = "5";
      data.maxVal = "10";
    }
    if (data.key == "fmc") {
      data.minVal = "5000000000";
      data.maxVal = "20000000000";
    }
    formList.value.push(data);
  });
  var container = document.querySelector("#data-context");
  container.scrollTop = 800;
};
const delList = (idx, key) => {
  let aidx = 0;

  cities.value.map((a, b) => {
    if (a.key == key) {
      aidx = b;
    }
  });
  cities.value.splice(idx, 1);
  formList.value.splice(idx, 1);
};

defineExpose({
  getData() {
    localStorage.formList = JSON.stringify(formList.value);
    return formList.value;
  },
});
</script>

 <style scoped>
.dfgdgdftt {
  line-height: 40px;
}
.data-context {
  height: 400px;
  overflow: auto;
}
#data-context {
  padding-bottom: 50px;
}
.cferrtt {
  width: 100px;
  position: relative;
  top: -2px;
  margin-left: 5px;
  margin-right: 5px;
}
</style>